@charset 'utf-8';
*{ margin: 0; padding: 0; border: 0; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
html,body{ width: 100%; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
ul,li{ list-style: none;}
a{ text-decoration: none; }
button{ -webkit-tap-highlight-color: rgba(0,0,0,0); background: none; }

.container{ width: 100%; height: 100%; position: relative; overflow: hidden; }

.container>.header{ width: 100%; padding: 20px 0; position: absolute; left: 0; top: 0; bottom: auto; z-index: 151; box-shadow: 0px 0px 20px #000; background-image: linear-gradient(rgba(0,0,0,.8),rgba(97,97,97,1)); transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1); }
.container>.header>h1{ display: block; text-align: center; line-height: 60px; height: 60px; font-size: 38px; color: #fff; user-select: none; text-shadow: 1px -1px 2px #474747, 2px 2px 5px #333333; transition: .5s all; }
.menu{ display: flex; flex-flow: row; justify-content: space-around; height: 0; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: .5s all; position: relative; z-index: 2; }
.menu>li{ border-radius: 6px; transition: all .3s; }
.menu>li.active{ background-image: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.3));}
.menu>li>a{ font-size: 16px; line-height: 30px; display: block; background-repeat: no-repeat; background-size: 50px 50px; width: 50px; height: 50px; background-position: center; text-align: center; position: relative; }
.menu>li>a>span{ color: #fff; position: absolute; left: 50%; top: 50px; transform: translate(-50%,-10px); white-space: nowrap; background-color: #666; padding: 0px 6px; margin: 10px 0 0 0; border-radius: 4px; box-shadow: 0px 0px 6px #fff; opacity: 0; visibility: hidden; transition: .5s all; }
.fix .menu>li:hover span{ visibility: visible; opacity: 1; transform: translate(-50%,0); }
.container>.header.fix:hover>h1{ transform: translateY(-20px); opacity: 0; visibility: hidden; height: 0;}
.container>.header.fix:hover>.menu{ opacity: 1; visibility: visible; height: 50px; transform: translateY(0); }
.map{ width: 100%; height: 100%; background: gray; }

.infoBox{ width: 360px; padding: 0 10px; position: absolute; left: 10px; top: 120px; z-index: 152; background-color: #fff; border-radius: 6px; box-shadow: 0px 0px 10px #000; transform: translateX(calc(-100% - 10px)); opacity: 0; visibility: hidden; transition: all .5s; }
.infoBox.active{ transform: translateX(0); opacity: 1; visibility: visible; }
.infoBox>.header{ position: relative; border-bottom: 1px solid #ddd; }
.infoBox>.header>.title>span{ font-size: 16px; line-height: 40px; color: #333; }
.infoBox>.header>.title>a{ font-size: 12px; display: inline-block; margin: 0 0 0 6px; background-color: #555; line-height: 20px; color: #fff; border-radius: 4px; padding: 0 6px; }
.infoBox>.header>.close{ width: 30px; height: 30px; line-height: 30px; border-radius: 2px; text-align: center; background-color: #f1f1f1; font-size: 28px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: all .5s; }
.infoBox>.header>.close:hover{ background-color: #666; color: #fff; }
.infoBox>.body{ padding: 10px 0; }
.infoBox>.body>div{ margin: 0 10px; }
.contentImg>img{ max-width: 100%; }
.infoBox>.body>.contentText{ max-height: calc(100% - 300px); overflow: hidden; overflow-y: scroll; font-size: 12px; padding: 4px 0; margin: 0; }
.contentText::-webkit-scrollbar{ width: 2px; position: fixed; right: 0; top: 0;  }
.contentText::-webkit-scrollbar-thumb{ border-radius: 10px; background: #bbbbbb;  }
.contentRow{ display: flex; flex-flow: row; font-size: 12px; line-height: 20px; margin: 6px 10px; }
.contentRow>div{ padding: 4px 6px; border: 1px solid #c7c7c7; }
.contentRow>.contentRowKey{ flex: 0 0 68px; display: flex; flex-flow: column; justify-content: center; align-items: center; vertical-align: middle; background-color: #ddd; color: #666; text-align: center; border-radius: 4px 0 0 4px; border-right: 0; }
.contentRow>.contentRowVal{ flex: auto; color: #999; border-radius: 0 4px 4px 0; border-left: 0; }
.contentTip{ padding: 10px 0; font-size: 12px; line-height: 20px; color: #c7c7c7; }
.sub{ flex: 1; }
.sub>li{ background-color: #e2e2e2; border-radius: 4px; padding: 6px 0; margin: 2px 0; }
.sub>li>a{ padding: 0 0 0 40px; background-repeat: no-repeat; background-position: left center; color: #666; font-size: 14px; line-height: 30px; background-size: 30px 30px; display: block; margin: 0 10px; }
.contentNull{ font-size: 14px; color: #999; text-align: center; line-height: 20px; padding: 20px 0; }


.myIcon{ width: 1px; height: 1px; border-radius: 100%;}
.myIcon>i{ width: 4px; height: 4px; border-radius: 100%; display: block; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; position: absolute; left: 50%; top: 100%; transform: translate(-50%,-100%); z-index: 0; }
.myText{ color: #fff; white-space: nowrap; text-align: center; position: absolute; left: 50%; top: 0; transform: translate(-50%,-10%); background-color: #464646; border-radius: 4px; padding: 4px 6px; box-shadow: 0px 0px 5px #d2d2d2; opacity: 0; visibility: hidden; transition: all .3s; z-index: 200; }
.myText p{ margin: 0; }
.myText p:nth-child(1){ font-size: 16px; }
.myText p:nth-child(2){ font-size: 12px; }
.myIcon:hover .myText{ opacity: 1; visibility: visible; transform: translate(-50%,0); }

.amap-toolbar{ left: auto!important; right: 30px!important; top: auto!important; bottom: 10px!important; }

@media screen and (max-width: 1024px) {
    html,body{ font-size: 10px; }
    .container>.header{ background: #fff; top: auto; bottom: 0; border-radius: 10px 10px 0 0; box-shadow: 0px 0px 20px #000; padding: 0; }
    .container>.header.active>.menu{ height: 60vh; transform: translateY(0); opacity: 1; visibility: visible; overflow-y: scroll; }
    .container>.header>h1{ text-align: center; line-height: 2.6em; height: 2.6em; overflow: hidden; font-size: 2.4rem; color: #333; text-shadow: none; }
    .menu{ display: block; height: 0; transform: translateY(20px); overflow: hidden; margin: 0 1.4rem; transition: all .5s ease-in-out; }
    .menu>li{ background-color: #ececec; margin: 2% 0; padding: 0 10px; border: 1px solid #ddd; }
    .menu>li.active{ background: #ececec;  }
    .menu>li>a{ width: unset; height: 2.6em; display: inline-block; display: block; font-size: 1.8rem; line-height: 2.6em; background-repeat: no-repeat; background-position: left center; background-size: 1.4em 1.4em; padding: 0 0 0 1.4em; color: #555; text-align: left;  }
    .menu>li>a>span{ opacity: 1; visibility: visible; left: 1.4em; top: 50%; transform: translateY(-50%); margin: 0; background-color: transparent; color: #666; box-shadow: 0px 0px 0px transparent; }
    .infoBox{ width: calc(100% - 20px); left: 0; top: auto; bottom: 0; border-radius: 6px 6px 0 0; transform: translateY(100%); }
    .infoBox.active{ transform: translateY(0); }
    .infoBox>.header>.title>span{ font-size: 1.8rem; line-height: 2.6em; }
    .infoBox>.header>.close{ font-size: 2.8rem; width: 1.2em; height: 1.2em; line-height: 1em; }
    .infoBox>.body{ max-height: 70vh; overflow-y: scroll; }
    .infoBox>.body>div{ margin: 0 1rem; }
    .contentRow{ font-size: 1.2rem; line-height: 1.6em; }
    .contentRow>div{ padding: 0.4rem 0.8rem; }
    .contentRow>.contentRowKey{ flex: 0 0 7.4rem; }
    .contentTip{ font-size: 1.2rem; }
    .contentNull{ font-size: 1.4rem; line-height: 1.6em; padding: 1.6em 0; }

    .amap-touch-toolbar{ left: 1rem!important; right: auto!important; top: auto!important; bottom: 20rem!important; }
}